<template>
	<view class="content">
		<!-- 启动图 -->
		<view class="two" v-if="launchType == 1">
			<swiper class="swiper" @change="changeSwiper">
				<swiper-item v-for="(item, index) in imgList" :key="index">
					<view class="swiper_one" v-if="index == imgList.length - 1" @tap="goPath()"
						@touchstart="itemTouchstart" @touchmove="itemTouchmove">
						<image :src="item.thumb | assembleImgSrc" mode="aspectFill"></image>
						<view class="swiper_end_btn" v-if="false"><button type="primary" plain="true"
								@tap="goPath()">{{i18n['即刻体验']}}</button></view>
					</view>
					<view class="swiper_one" v-else>
						<image :src="item.thumb | assembleImgSrc" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item, index) in imgList.length" :key="item">
					<view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>
		<!-- 引导视频 -->
		<video v-if="launchType == 2" class="ad_video" :src="video" :autoplay="true" :muted="isSound" :loop="false"
			:direction="0" :controls="false" :show-center-play-btn="false" :enable-progress-gesture="false"
			:vslide-gesture-in-fullscreen="false" @error="playError" @play="playStart" @ended="ended"
			object-fit="cover">
			<cover-view @click="goPath" class="cu-btn round cover-text jump">{{i18n['关闭']}}</cover-view>
			<cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/off.png'" @click="offSound"
				v-if="isSound"></cover-image>
			<cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/on.png'" @click="onSound"
				v-if="!isSound"></cover-image>
		</video>
		<!-- 断网检测 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				isSound: true,
				launchType: 1, // 类型，控制显示哪一种
				video: '',
				imgList: [], //引导页列表
				touches: {
					startX: '',
					startY: '',
					moveEndX: '',
					moveEndY: ''
				},
				swiperCurrent: 0,
				dotsStyles: {
					bottom: -20,
					backgroundColor: 'rgba(230, 0, 54, 0.3)',
					selectedBackgroundColor: '#FE510D'
				},
			};
		},
		computed: {
			isLogin() {
				return this.$store.getters.isLogin
			}
		},
		onLoad() {
			console.log(this.isLogin, 'isLogin');
			this.$api.post(global.apiUrls.postOperationGetAds, {
				typeid: 5
			}).then(res => {
				if (res.data.code == 1) {
					// 判断视频或者图片引导页
					console.log('引导页数据', res.data.data);
					// 空数据，不显示，隐藏引导页功能
					if (res.data.data.length == 0) this.goPath();
					let flag = false;
					let newSwiperArr = [];
					res.data.data.forEach((item, index) => {
						if (item.type == 2) {
							this.video = item.video;
							this.launchType = 2;
							flag = true;
						}
						if (item.type == 1) {
							newSwiperArr.push(item);
						}
					});
					// 判断视频不存在，展示图片引导页
					if (!flag) {
						this.launchType = 1;
						this.imgList = newSwiperArr;
					}
				}
			});
		},
		methods: {
			// 视频播放结束
			ended() {
				console.log('页面跳转');
				this.goPath();
			},
			// 播放失败
			playError(e) {
				console.log('播放失败', e);
			},
			// 开始播放
			playStart(e) {
				console.log('开始播放');
			},
			// 声音操作
			onSound() {
				this.isSound = true;
				console.log(this.isSound);
			},
			offSound() {
				this.isSound = false;
				console.log(this.isSound);
			},
			// 切换轮播图
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			itemTouchstart(e) {
				e.preventDefault();
				(this.touches.startX = e.changedTouches[0].pageX), (this.touches.startY = e.changedTouches[0].pageY);
			},
			itemTouchmove(e) {
				e.preventDefault();
				this.touches.moveEndX = e.changedTouches[0].pageX;
				this.touches.moveEndY = e.changedTouches[0].pageY;
				let X = this.touches.moveEndX - this.touches.startX;
				let Y = this.touches.moveEndY - this.touches.startY;
				// 滑动 去首页
				if (Math.abs(X) > 100 && X < 0 && Y > 0) {
					uni.setStorageSync('AD_INFO', true);
					if (!this.isLogin) uni.reLaunch({
						url: '/pages/user/login/login-code/index'
					});
					if (this.isLogin) uni.switchTab({
						url: '/pages/tab/home/shopindex/index'
					});

				}
			},
			//跳过
			goPath() {
				console.log(this.isLogin, 'isLogin');
				uni.setStorageSync('AD_INFO', true);
				if (!this.isLogin) uni.reLaunch({
					url: '/pages/user/login/login-code/index'
				});
				if (this.isLogin) uni.switchTab({
					url: '/pages/tab/home/shopindex/index'
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;

		.one {
			height: 100%;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}

			.countdown {
				position: absolute;
				right: 20upx;
				// top: calc(15upx + var(--status-bar-height));
				padding: 10upx 20upx;
				background: rgba(0, 0, 0, 0.7);
				color: #fff;
				border-radius: 30upx;
			}
		}

		.two {
			position: relative;

			.swiper {
				width: 750upx;
				height: 100vh;

				swiper-item {
					height: 100vh;
					width: 750upx;

					.swiper_one {
						image {
							height: 100vh;
							width: 750upx;
						}

						view {
							position: absolute;
							left: 50%;
							bottom: 150upx;
							transform: translateX(-50%);
							padding: 20upx 60upx;
							background: rgba(0, 0, 0, 0.3);
							color: #fff;
							border-radius: 40upx;
							background: $bgtheme;
						}

						.swiper_end_btn {
							background: rgba(0, 0, 0, 0);
							bottom: 100rpx;

							button {
								border-radius: 40rpx;
								/* padding:0 30rpx ; */
								width: 400rpx;
								height: 90rpx;
								line-height: 90rpx;
								background-color: rgba(255, 255, 2555, 1);
							}
						}
					}
				}
			}

			.dots {
				position: absolute;
				bottom: 84upx;
				left: 50%;
				/*  这里一定要注意兼容不然很可能踩坑 */
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
				z-index: 99;
				display: flex;
				flex-direction: row;
				justify-content: center;

				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					transition: all 0.6s;
					background: #ccc;
					margin-right: 15rpx;
					border-radius: 3px;
				}

				.active {
					width: 24rpx;
					height: 8rpx;
					background: $fu-main-color;
				}
			}
		}
	}

	.ad_video {
		position: absolute;
		width: 100%;
		height: 100vh;
	}

	.jump {
		position: absolute;
		z-index: 99;
		top: 60rpx;
		right: 40rpx;
	}

	.cover-image-sound {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		z-index: 99;
		top: 60rpx;
		left: 40rpx;
	}

	/* #ifdef APP-PLUS */
	.jump {
		top: 120rpx;
	}

	.cover-image-sound {
		top: 120rpx;
	}

	.cover-text {
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		line-height: 45rpx;
	}

	/* #endif */
</style>